<template>
  <view class="container">
    <!-- 视频播放区域 -->
    <view class="video-section" @touchstart="showControls = true"
      @touchend="isPlaying ? setTimeout(() => { showControls = false }, 3000) : ''">
      <!-- 视频占位符 -->
      <view class="video-placeholder">
        <text>{{ currentLecture.title }} - 视频播放区域</text>
      </view>

      <!-- 视频控制器 -->
      <view v-if="showControls" class="video-controls">
        <view class="progress-container">
          <slider :value="progress" :max="100" :step="0.1" @change="onProgressChange" activeColor="#2196f3"
            backgroundColor="rgba(255, 255, 255, 0.2)" block-size="12" block-color="#2196f3" />
        </view>

        <view class="controls-row">
          <view class="controls-left">
            <view class="control-button" @click="togglePlay">
              <svg v-if="isPlaying" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="6" y="4" width="4" height="16"></rect>
                <rect x="14" y="4" width="4" height="16"></rect>
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="5 3 19 12 5 21 5 3"></polygon>
              </svg>
            </view>

            <view v-if="prevLecture" class="control-button" @click="navigateToLecture(prevLecture.id)">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="15 18 9 12 15 6"></polyline>
              </svg>
            </view>

            <view v-if="nextLecture" class="control-button" @click="navigateToLecture(nextLecture.id)">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </view>

            <view class="control-button" @click="toggleMute">
              <svg v-if="isMuted" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <line x1="23" y1="9" x2="17" y2="15"></line>
                <line x1="17" y1="9" x2="23" y2="15"></line>
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
              </svg>
            </view>

            <text class="time-display">{{ currentTime }} / {{ currentLecture.duration }}</text>
          </view>

          <view class="controls-right">
            <view class="control-button" @click="toggleFullscreen">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3">
                </path>
              </svg>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 课程内容区域 -->
    <view class="content-section">
      <view class="header">
        <view class="back-button" @click="goBack">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
          <text>返回课程</text>
        </view>

        <view class="lecture-position">
          <text>{{ currentLecture.chapter }} · {{ currentIndex + 1 }}/{{ lectureData.length }}</text>
        </view>
      </view>

      <view class="content-grid">
        <!-- 左侧 - 讲义信息 -->
        <view class="lecture-info">
          <text class="lecture-title">{{ currentLecture.title }}</text>

          <view class="tabs">
            <view v-for="(tab, index) in contentTabs" :key="index" class="tab"
              :class="{ active: activeContentTab === tab.value }" @click="activeContentTab = tab.value">
              <view class="tab-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path v-if="tab.value === 'description'"
                    d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                  <path v-if="tab.value === 'discussion'"
                    d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                  <path v-if="tab.value === 'resources'"
                    d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3"></path>
                </svg>
              </view>
              <text>{{ tab.label }}</text>
            </view>
          </view>

          <!-- 讲义标签页 -->
          <view v-if="activeContentTab === 'description'" class="tab-content">
            <view class="description-content">
              <text class="paragraph">
                本节课介绍{{ currentLecture.title }}的核心概念和应用场景。通过理论讲解和实例分析，帮助学生深入理解相关知识点。
              </text>

              <text class="sub-heading">学习目标</text>
              <view class="list">
                <view class="list-item">
                  <text class="bullet">•</text>
                  <text>理解{{ currentLecture.title }}的基本概念</text>
                </view>
                <view class="list-item">
                  <text class="bullet">•</text>
                  <text>掌握{{ currentLecture.title }}的关键技术</text>
                </view>
                <view class="list-item">
                  <text class="bullet">•</text>
                  <text>能够应用所学知识解决实际问题</text>
                </view>
              </view>

              <text class="sub-heading">关键知识点</text>
              <text class="paragraph">在本节课中，我们将深入探讨以下几个方面：</text>
              <view class="list numbered">
                <view class="list-item">
                  <text class="number">1.</text>
                  <text>基础理论与概念框架</text>
                </view>
                <view class="list-item">
                  <text class="number">2.</text>
                  <text>核心算法与实现方法</text>
                </view>
                <view class="list-item">
                  <text class="number">3.</text>
                  <text>实际应用案例分析</text>
                </view>
                <view class="list-item">
                  <text class="number">4.</text>
                  <text>未来发展趋势展望</text>
                </view>
              </view>

              <text class="sub-heading">实践作业</text>
              <text class="paragraph">完成本节课后，请尝试解决以下练习题，巩固所学知识：</text>
              <view class="exercise-box">
                <text class="exercise-title">练习题：</text>
                <text class="exercise-content">根据本节课所学内容，设计一个简单的应用方案，解决实际问题。</text>
              </view>
            </view>
          </view>

          <!-- 讨论标签页 -->
          <view v-if="activeContentTab === 'discussion'" class="tab-content">
            <view class="discussion-content">
              <view class="empty-state">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                </svg>
                <text class="empty-title">参与课程讨论</text>
                <text class="empty-description">与其他学习者交流想法和问题</text>
                <button class="primary-button">发起讨论</button>
              </view>
            </view>
          </view>

          <!-- 资源标签页 -->
          <view v-if="activeContentTab === 'resources'" class="tab-content">
            <view class="resources-content">
              <view v-for="(resource, index) in lectureResources" :key="index" class="resource-item">
                <view class="resource-info">
                  <view class="resource-icon" :class="resource.type.toLowerCase()">
                    {{ resource.type }}
                  </view>
                  <view class="resource-details">
                    <text class="resource-title">{{ resource.title }}</text>
                    <text class="resource-description">{{ resource.description }}</text>
                  </view>
                </view>
                <button class="download-button">下载</button>
              </view>
            </view>
          </view>
        </view>

        <!-- 右侧 - 课程大纲 -->
        <view class="course-outline">
          <view class="outline-header">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="8" y1="6" x2="21" y2="6"></line>
              <line x1="8" y1="12" x2="21" y2="12"></line>
              <line x1="8" y1="18" x2="21" y2="18"></line>
              <line x1="3" y1="6" x2="3.01" y2="6"></line>
              <line x1="3" y1="12" x2="3.01" y2="12"></line>
              <line x1="3" y1="18" x2="3.01" y2="18"></line>
            </svg>
            <text>课程大纲</text>
          </view>

          <view class="outline-content">
            <view v-for="(chapter, chapterIndex) in groupedLectures" :key="chapterIndex" class="outline-chapter">
              <text class="chapter-title">{{ chapter.title }}</text>
              <view class="chapter-lectures">
                <view v-for="lecture in chapter.lectures" :key="lecture.id" class="outline-lecture"
                  :class="{ active: lecture.id === currentLecture.id }" @click="navigateToLecture(lecture.id)">
                  <view class="lecture-status">
                    <view v-if="lecture.completed" class="status-dot completed"></view>
                    <view v-else-if="lecture.id === currentLecture.id" class="status-dot current"></view>
                    <view v-else class="status-dot"></view>
                  </view>
                  <view class="lecture-details">
                    <text class="lecture-name">{{ lecture.title }}</text>
                    <text class="lecture-time">{{ lecture.duration }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';

// 课程数据
const lectureData = [
  { id: 1, title: "什么是web开发", duration: "15:30", completed: true, chapter: "人工智能导论" },
  { id: 2, title: "web开发的历史与发展", duration: "20:45", completed: true, chapter: "人工智能导论" },
  { id: 3, title: "web的应用场景", duration: "18:20", completed: false, chapter: "人工智能导论" },
  { id: 4, title: "课程项目介绍", duration: "12:10", completed: false, chapter: "人工智能导论" },
  { id: 5, title: "机器学习概述", duration: "22:15", completed: false, chapter: "机器学习基础" },
  { id: 6, title: "监督学习", duration: "25:40", completed: false, chapter: "机器学习基础" },
  { id: 7, title: "无监督学习", duration: "18:30", completed: false, chapter: "机器学习基础" },
  { id: 8, title: "强化学习", duration: "20:10", completed: false, chapter: "机器学习基础" },
  { id: 9, title: "评估模型", duration: "15:45", completed: false, chapter: "机器学习基础" },
  { id: 10, title: "神经网络基础", duration: "24:30", completed: false, chapter: "深度学习入门" },
  { id: 11, title: "卷积神经网络", duration: "28:15", completed: false, chapter: "深度学习入门" },
  { id: 12, title: "循环神经网络", duration: "26:40", completed: false, chapter: "深度学习入门" },
  { id: 13, title: "Transformer架构", duration: "30:20", completed: false, chapter: "深度学习入门" },
];

// 课程资源
const lectureResources = [
  { title: "课程讲义", description: "本节课完整讲义", type: "PDF" },
  { title: "代码示例", description: "本节课相关代码", type: "ZIP" },
  { title: "课程幻灯片", description: "演示文稿", type: "PPT" },
];

// 内容标签页
const contentTabs = [
  { label: "讲义", value: "description" },
  { label: "讨论", value: "discussion" },
  { label: "资源", value: "resources" },
];

// 状态
const lectureId = ref(0);
const isPlaying = ref(false);
const isMuted = ref(false);
const progress = ref(0);
const currentTime = ref("0:00");
const showControls = ref(true);
const activeContentTab = ref("description");

// 计算属性
const currentLecture = computed(() => {
  return lectureData.find(lecture => lecture.id === lectureId.value) || lectureData[0];
});

const currentIndex = computed(() => {
  return lectureData.findIndex(lecture => lecture.id === lectureId.value);
});

const prevLecture = computed(() => {
  return currentIndex.value > 0 ? lectureData[currentIndex.value - 1] : null;
});

const nextLecture = computed(() => {
  return currentIndex.value < lectureData.length - 1 ? lectureData[currentIndex.value + 1] : null;
});

const groupedLectures = computed(() => {
  const chapters = [];
  const uniqueChapters = [...new Set(lectureData.map(lecture => lecture.chapter))];

  uniqueChapters.forEach(chapterTitle => {
    chapters.push({
      title: chapterTitle,
      lectures: lectureData.filter(lecture => lecture.chapter === chapterTitle)
    });
  });

  return chapters;
});

// 方法
function goBack() {
  uni.navigateTo({
    url: "/pages/list/list"
  })
}

function togglePlay() {
  isPlaying.value = !isPlaying.value;

  if (isPlaying.value) {
    startProgressTimer();
  } else {
    stopProgressTimer();
  }
}

function toggleMute() {
  isMuted.value = !isMuted.value;
}

function toggleFullscreen() {
  // 在实际应用中实现全屏功能
  uni.showToast({
    title: '全屏功能在实际应用中实现',
    icon: 'none'
  });
}

function navigateToLecture(id) {
  // 切换课程时重置状态
  isPlaying.value = false;
  progress.value = 0;
  currentTime.value = "0:00";
  stopProgressTimer();

  // 更新课程ID
  lectureId.value = id;
}

function onProgressChange(e) {
  progress.value = e.detail.value;

  // 根据进度更新当前时间
  const totalSeconds = convertTimeToSeconds(currentLecture.value.duration);
  const currentSeconds = Math.floor((totalSeconds * progress.value) / 100);
  currentTime.value = formatTime(currentSeconds);
}

// 时间转换辅助函数
function convertTimeToSeconds(timeString) {
  const [minutes, seconds] = timeString.split(":").map(Number);
  return minutes * 60 + seconds;
}

function formatTime(seconds) {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs.toString().padStart(2, "0")}`;
}

// 进度定时器
let progressTimer = null;

function startProgressTimer() {
  if (progressTimer) return;

  progressTimer = setInterval(() => {
    if (progress.value >= 100) {
      isPlaying.value = false;
      progress.value = 100;
      stopProgressTimer();
      return;
    }

    progress.value += 0.5;

    // 根据进度更新当前时间
    const totalSeconds = convertTimeToSeconds(currentLecture.value.duration);
    const currentSeconds = Math.floor((totalSeconds * progress.value) / 100);
    currentTime.value = formatTime(currentSeconds);
  }, 500);
}

function stopProgressTimer() {
  if (progressTimer) {
    clearInterval(progressTimer);
    progressTimer = null;
  }
}

// 生命周期
onLoad((options) => {
  if (options && options.id) {
    lectureId.value = parseInt(options.id);
  } else {
    lectureId.value = 1; // 默认第一课
  }
});

onUnload(() => {
  stopProgressTimer();
});

// 播放时延迟隐藏控制器
let controlsTimer = null;

function setupControlsTimer() {
  if (controlsTimer) {
    clearTimeout(controlsTimer);
  }

  if (isPlaying.value) {
    controlsTimer = setTimeout(() => {
      showControls.value = false;
    }, 3000);
  }
}

// 监听播放状态变化
onMounted(() => {
  uni.$watch(() => isPlaying.value, (newVal) => {
    if (newVal) {
      setupControlsTimer();
    } else {
      showControls.value = true;
      if (controlsTimer) {
        clearTimeout(controlsTimer);
      }
    }
  });
});

onUnmounted(() => {
  if (controlsTimer) {
    clearTimeout(controlsTimer);
  }
});
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* 视频区域 */
.video-section {
  position: relative;
  width: 100%;
  background-color: #000;
}

.video-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28rpx;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 20rpx;
}

.progress-container {
  margin-bottom: 20rpx;
}

.controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.controls-left,
.controls-right {
  display: flex;
  align-items: center;
}

.control-button {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-button svg {
  stroke: white;
}

.time-display {
  color: white;
  font-size: 24rpx;
  margin-left: 10rpx;
}

/* 内容区域 */
.content-section {
  flex: 1;
  padding: 30rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.back-button {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
}

.back-button svg {
  margin-right: 10rpx;
  stroke: #333;
}

.lecture-position {
  font-size: 24rpx;
  color: #666;
}

.content-grid {
  display: flex;
  flex-direction: column;
}

/* 讲义信息 */
.lecture-info {
  margin-bottom: 30rpx;
}

.lecture-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 30rpx;
}

.tab {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab.active {
  color: #2196f3;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -2rpx;
  left: 0;
  right: 0;
  height: 4rpx;
  background-color: #2196f3;
}

.tab-icon {
  margin-right: 10rpx;
}

.tab-icon svg {
  stroke: currentColor;
}

.tab-content {
  padding: 20rpx 0;
}

/* 讲义标签页 */
.description-content {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

.paragraph {
  display: block;
  margin-bottom: 30rpx;
}

.sub-heading {
  display: block;
  font-weight: bold;
  font-size: 30rpx;
  margin: 40rpx 0 20rpx;
}

.list {
  margin-bottom: 30rpx;
}

.list-item {
  display: flex;
  margin-bottom: 16rpx;
}

.bullet,
.number {
  margin-right: 16rpx;
}

.exercise-box {
  background-color: #e3f2fd;
  border: 1px solid #bbdefb;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-top: 20rpx;
}

.exercise-title {
  font-weight: bold;
  color: #1565c0;
  margin-bottom: 10rpx;
  display: block;
}

/* 讨论标签页 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
}

.empty-state svg {
  stroke: #ddd;
  margin-bottom: 20rpx;
}

.empty-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.empty-description {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.primary-button {
  background-color: #2196f3;
  color: white;
  padding: 16rpx 40rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
}

/* 资源标签页 */
.resources-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.resource-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
}

.resource-info {
  display: flex;
  align-items: center;
}

.resource-icon {
  width: 60rpx;
  height: 60rpx;
  background-color: #e3f2fd;
  color: #2196f3;
  border-radius: 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  margin-right: 20rpx;
}

.resource-title {
  font-weight: bold;
  font-size: 28rpx;
}

.resource-description {
  font-size: 24rpx;
  color: #666;
}

.download-button {
  border: 1px solid #ddd;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  margin-right: 5rpx;
}

/* 课程大纲 */
.course-outline {
  background-color: white;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-top: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.outline-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.outline-header svg {
  margin-right: 10rpx;
  stroke: #2196f3;
}

.outline-header text {
  font-size: 30rpx;
  font-weight: bold;
}

.outline-content {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.outline-chapter {
  display: flex;
  flex-direction: column;
}

.chapter-title {
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.chapter-lectures {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.outline-lecture {
  display: flex;
  padding: 16rpx;
  border-radius: 8rpx;
}

.outline-lecture.active {
  background-color: #e3f2fd;
  border-left: 4rpx solid #2196f3;
}

.lecture-status {
  margin-right: 16rpx;
  display: flex;
  align-items: center;
}

.status-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
}

.status-dot.completed {
  background-color: #e8f5e9;
  border: none;
  position: relative;
}

.status-dot.completed::after {
  content: '';
  position: absolute;
  width: 10rpx;
  height: 10rpx;
  background-color: #4caf50;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.status-dot.current {
  background-color: #e3f2fd;
  border: none;
  position: relative;
}

.status-dot.current::after {
  content: '';
  position: absolute;
  width: 10rpx;
  height: 10rpx;
  background-color: #2196f3;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lecture-details {
  flex: 1;
}

.lecture-name {
  font-size: 26rpx;
  margin-bottom: 6rpx;
}

.outline-lecture.active .lecture-name {
  color: #2196f3;
  font-weight: bold;
}

.lecture-time {
  font-size: 22rpx;
  color: #666;
}

/* 媒体查询 - 适配大屏幕 */
@media screen and (min-width: 768px) {
  .content-grid {
    flex-direction: row;
    gap: 30rpx;
  }

  .lecture-info {
    flex: 2;
    margin-bottom: 0;
  }

  .course-outline {
    flex: 1;
    margin-top: 0;
  }
}
</style>